<template>
  <section class="sp-searcion sp-bus">
    <!-- header -->
    <header class="sp-bus__header">
      <!-- search -->
      <div class="sp-bus__header-search">
        <!-- <el-input style="max-width: 230px;" placeholder="请输入点位编号">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input> -->
        <el-select v-model="route" clearable multiple autocomplete filterable placeholder="请选择" style="width: 400px;">
          <el-option v-for="item in list" :key="item.id" :label="item.route_name" :value="item.pure_name" />
        </el-select>
          <el-button @click="search()">默认按钮</el-button>
      </div>
    </header>
    <!-- 地图 -->
    <div class="sp-bus__map">
        <el-amap :center="center" :zoom="zoom" id="container">
        <el-amap-marker :position="center" :label="label"></el-amap-marker>
      </el-amap>
      <!-- <baidu-map
        :center="mapCenter"
        :zoom="mapZoom"
        :scroll-wheel-zoom="true"
        @ready="initMap"
        :ak="mapKey"
        style="width: 100%; height: 100%;"
      > -->
        <!-- <bm-view class="map" style="width: 100%; height: 100%;"></bm-view> -->
        <!-- 公交路线 -->
        <!-- <template v-for="(item, index) in route">
          <bm-bus
            :panel="true"
            :key="index"
            :keyword="item"
            :auto-viewport="true"
            :selectFirstResult="true"
            location="西宁"
          />
          -->
        <!-- </template> -->
      <!-- </baidu-map> -->
    </div>
    <!-- <div class="sp-bus__boxes">
      <span
        v-for="(item, $index) in list"
        :key="$index"
        :class="{
          'active': item.checked
        }"
        @click="setBusChecked($index)"
      >{{ item.route_name }}</span>
    </div> -->
  </section>
</template>

<script>
// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
// import { BmBus, BmView } from 'vue-baidu-map'
// import AMapLoader from '@amap/amap-jsapi-loader'
import { getBuslist, getBusType } from '@/api/bus'

export default {
  name: 'BusIndex',
  components: {
  },
  data () {
    return {
      center: [101.777795, 36.616621],
      zoom: 12,
      label: {
        content: '微微一笑绝绝子',
        offset: [10, 12]
      },
      mapKey: 'l4AjqEusYdGyXi9bzVrtz5xlGlDzmvio',
      mapZoom: 10,
      mapCenter: {
        lng: 101.70,
        lat: 36.62
      },
      map: null,
      mapExtend: null,
      mapControl: null,
      list: [
        {
          route_name: '66号线',
          pure_name: '66'
        }
      ],
      route: []
    }
  },
  created () {
    this.getBusData()
    // this.initMap()
  },
  mounted () {
    this.initMap()
    // this.getBusType()
  },
  methods: {
    // busmap () {
    //   var busline = new BMapGL.BusLineSearch(map, {
    //     renderOptions:{map:map,panel:"r-result"},
    //     onGetBusListComplete: function(result){
    //       if(result) {
    //         var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
    //         busline.getBusLine(fstLine);
    //       }
    //     }
    //   })
    // },
    initMap (map) {
      // eslint-disable-next-line no-redeclare
      this.map = new AMap.Map('container', {
        center: [101.777795, 36.616621],
        label: {
          content: '微微一笑绝绝子',
          offset: [10, 12]
        },
        zoomEnable: true, // 是否禁止缩放
        zoom: 14, // 缩放比例
        dragEnable: true, // 禁止拖动
        cursor: 'hand' // 鼠标在地图上的表现形式，小手
      })
      this.map.setMapStyle('amap://styles/50471cf997eaa81d3140f305ae3a7fae')
      // 初始化工具条
      this.map.plugin(['AMap.ToolBar', 'AMap.Polyline'], function () {
        this.map.addControl(new AMap.ToolBar())
      })
    },
    search () {
      const that = this
      var linesearch = new AMap.LineSearch({
        pageIndex: 1, // 页码，默认值为1
        pageSize: 1, // 单页显示结果条数，默认值为20，最大值为50
        city: '西宁', // 限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』
        extensions: 'all' // 是否返回公交线路详细信息，默认值为『base』
      })
      // 执行公交路线关键字查询
      // this.route.forEach((item, index) => {
      that.map.clearMap()
      that.route.map(routeitem => {
        linesearch.search(routeitem, function (status, result) {
        // 打印状态信息status和结果信息result
          if (status === 'complete' && result.info === 'OK') {
          // eslint-disable-next-line no-undef
            that.lineSearch_Callback(result)
          } else {
            alert(result)
          }
        // })
        })
      })
    },
    lineSearch_Callback (data) {
      var lineArr = data.lineInfo
      var lineNum = data.lineInfo.length
      // console.log(data.lineInfo.length)
      // eslint-disable-next-line eqeqeq
      if (lineNum == 0) {
      } else {
        for (var i = 0; i < lineNum; i++) {
          var pathArr = lineArr[i].path
          var stops = lineArr[i].via_stops
          var startPot = stops[0].location
          var endPot = stops[stops.length - 1].location
          console.log(pathArr)
          // eslint-disable-next-line eqeqeq
          if (i == 0) {
            this.drawbusLine(startPot, endPot, pathArr)
          } // 作为示例，只绘制一条线路
        }
      }
    },
    drawbusLine (startPot, endPot, BusArr) {
      // console.log(this.map)
      // const that = this
      // 绘制起点，终点
      // eslint-disable-next-line no-new
      new AMap.Marker({
        map: this.map,
        position: startPot, // 基点位置
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
        zIndex: 10,
        anchor: 'bottom-center'
      })
      // eslint-disable-next-line no-new
      new AMap.Marker({
        map: this.map,
        position: endPot, // 基点位置
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
        zIndex: 10,
        anchor: 'bottom-center'
      })
      // 绘制乘车的路线
      var busPolyline = new AMap.Polyline({
        map: this.map,
        path: BusArr,
        strokeColor: '#09f', // 线颜色
        strokeOpacity: 0.8, // 线透明度
        isOutline: true,
        outlineColor: 'white',
        strokeWeight: 6// 线宽
      })
      // 将 busPolyline 显示在地图中心并自动缩放地图到合适级别。
      // true表示需要动画过程，[60,200,60,60]表示上下左右避让像素
      this.map.setFitView(busPolyline, [60, 200, 60, 60])
    },
    // 初始化地图
    // initMap ({ BMap, map }) {
    //   this.mapExtend = BMap
    //   this.mapControl = map
    //   this.mapCenter.lng = 101.20
    //   this.mapCenter.lat = 36.82
    //   this.getBoundary()
    // },
    // 获取全部公交路线
    async getBusData () {
      const { data } = await getBuslist()
      console.log(data)
      this.list = data.map(item => {
        item.checked = false
        return item
      })
    },
    // 获取公交车类型
    async getBusType () {
      const { data } = await getBusType()
      console.log('bustype', data)
    },
    // 设置某条线路选中
    setBusChecked (index) {
      this.list[index].checked = !this.list[index].checked
    }
    // 指定城市描边
    // getBoundary () {
    //   const BMap = this.mapExtend
    //   const map = this.mapControl
    //   const bdary = new BMap.Boundary()
    //   bdary.get('西宁', function (rs) {
    //     const count = rs.boundaries.length
    //     if (count === 0) {
    //       return false
    //     }
    //     let locPoints = rs.boundaries[0]
    //     rs.boundaries.forEach((item) => {
    //       if (item.split(';').length > locPoints.length) {
    //         locPoints = item
    //       }
    //     })
    //     const plyPoints = []
    //     locPoints.split(';').map(item => {
    //       item = item.split(',')
    //       plyPoints.push(new BMap.Point(item[0], item[1]))
    //     })
    //     const EN_JW = new BMap.Point(180, 90)
    //     const NW_JW = new BMap.Point(-180, 90)
    //     const WS_JW = new BMap.Point(-180, -90)
    //     const SE_JW = new BMap.Point(180, -90)
    //     // 添加环形遮罩层
    //     if (plyPoints.length > 0) {
    //       plyPoints.push(plyPoints[0])
    //     }
    //     plyPoints.push(EN_JW)
    //     plyPoints.push(SE_JW)
    //     plyPoints.push(WS_JW)
    //     plyPoints.push(NW_JW)
    //     plyPoints.push(EN_JW)
    //     const mask = new BMap.Polygon(plyPoints, {
    //       strokeColor: 'none',
    //       fillColor: '#000',
    //       strokeOpacity: 1,
    //       fillOpacity: 0.35
    //     })
    //     mask.disableMassClear()
    //     map.addOverlay(mask)
    //   })
    // }
  }
}
</script>

<style lang="less">
  @import url('./index.less');
</style>
